<template>
  <div id="game" class="rock-ref game_main" data="4">
    <header-top :option="headerOption"></header-top>
    <banner></banner>
    <div class="game-kinds">
      <div class="game-kind-tab-wrap">
          <div v-bind:class="[index == gameTab ? 'game-kind-tab-select' : '','game-kind-tab']" v-for="(item,index) in kinds" @click="showGame(index)">
             <img class="k-line-new" src="https://dl.app.gtja.com/nrng/images/new.png" v-if="index == 999"/>
              <i class="iconfont" v-html="item.icon"></i>
              <div class="game-kind-tab_title" v-text='item.title'></div>
          </div>
      </div>
    </div>
    <team-game-list v-if="gameTab == 0"></team-game-list>
    <game-list v-if="gameTab == 1"></game-list>
    <bottom-bar :data-list="bottomList" :on-selected="onBottomSelected" v-if="false"></bottom-bar>
  </div>
</template>
<script>
  import HeaderTop from 'components/HeaderTop'
  import Constant from 'common/constant'
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import Suggest from 'components/game/suggest/Suggest'
  import BottomBar from 'components/BottomBar'
  import TeamGameList from 'components/game/gamelist/TeamGameList'
  import GameList from 'components/game/gamelist/GameList'
  import Banner from 'components/game/gamelist/Banner'
  import CommonUtil from 'common/common.util'

  export default {
    name: 'Game',
    data () {
      return {
        headerOption: {
          title: '比赛',
          leftBtn: Constant.leftBtn.CLOSE,
          operations: [Constant.operation.SEARCH, Constant.operation.BUILD_GAME],
          page:Constant.menu.GAME
        },
        hasDisplayGameSuggest:false,
        game:{},
        kinds:[
            {
                icon: "&#xe621;",
                title: "团队PK"
            },
            {
                icon: "&#xe620;",
                title: "个人PK"
            },
            {
                icon: "&#xe623;",
                title: "K线对决"
            },
            {
              　icon: "&#xe622;",
             　 title: "帮忙挑股"
            }
        ],
        gameTab:0,
        bottomList:[
          {
            id:1,
            text:'所有比赛'
          },
          {
            id:2,
            text:'我的比赛'
          }
        ]
      }
    },
    components: {
      'header-top': HeaderTop,
      'suggest': Suggest,
      'bottom-bar': BottomBar,
      'team-game-list': TeamGameList,
      'game-list': GameList,
      'banner':Banner
    },
    created () {
      this.$store.dispatch('setGuide',{guideType:Constant.tutorial.INDEX_BUILD_GAME});
      let gameTab = CommonUtil.getUrlParam('gameTab') || this.$route.query.gameTab
      if (gameTab) {
        this.gameTab = gameTab
      } else {
        this.gameTab = sessionStorage.getItem('gmeTab') || 0
      }
    },
    methods: {
      /**
     * bottom-bar回调函数
     */
      onBottomSelected:function (item,index) {
        if (item.id === 1) {
          if (!this.$route.path == "/game") {
            this.$router.push({path:'/game'});
          }
        }
        if (item.id === 2) {
            this.change2MyGame();
        }
      },
    /**
     * 点击tab，选择游戏种类
     * 跳转到另一种比赛，如团队PK
     * @param index 比赛类型（团队PK、个人PK、K线对决、帮忙挑股）从左往右的序号，序号从0开始
     */
    showGame: function (index) {
      switch(index){
        case 0:
          this.gameTab = index;
          sessionStorage.setItem('gmeTab', 0)
          this.maidian('17004');
          break;
        case 1:
          this.gameTab = index;
          sessionStorage.setItem('gmeTab', 1)
          this.maidian('17003');
          break;
        case 2:
          this.showKLinePK();
          this.maidian('17006');
          break;
        case 3:
          this.$router.push({path:'/game/moregames'});
          this.maidian('17005');
          break;
        default:
          console.info("showGroupPK");
      }
    },
    /**
     * 显示 K线对决
     * @private
     */
    showKLinePK: function () {
      let vm = this;
      //从服务器端获取scheme码，如果获取失败或者是为空，就还是按照原来的逻辑进行跳转。
        $.ajax({
            type: 'GET',
            url: "https://dl.app.gtja.com/nrng/KLinePK/KLinePK.json",
            dataType: "jsonp",
            jsonp: "callback",
            jsonpCallback:"kLinePK",
            data:{},
            success: function(){console.log("success1");},
            error:function(XMLHttpRequest){
                if(XMLHttpRequest.status !== 200){
                    vm.$router.push({path:'/game/moregames'});
                }
            }
        });

        function kLinePK(response){
            if(response.scheme !== ""){
                window.location.href = response.scheme;
            }else{
                vm.$router.push({path:'/game/moregames'});
            }
        }

        window.kLinePK = kLinePK;
    },

    /**
     * 切换到我的比赛
     * @param e
     * @private
     */
    change2MyGame: function () {
        let self = this;
        let nickName = LocalDAO.getNickname();
        if(nickName == undefined || nickName == null || nickName.length <= 0){
            RemoteDAO.callNativeLogin(function (response) {
                let userCode = response.data.user_code;
                let nickName = response.data.nick_name;
                LocalDAO.setUserCode(userCode);
                LocalDAO.setNickname(nickName);
                if(userCode != undefined && userCode != null && userCode.length > 0){
                    self.$router.push({path:'/game/mygames'});
                }
            })
        }else{
            let userCode =  LocalDAO.getUserCode();
            if(userCode !== undefined && userCode !== null && userCode.length > 0){
                self.$router.push({path:'/game/mygames'});
            }else{
                self.$store.dispatch('setTip',{text:"发生异常userCode="+userCode})
            }
        }
    },
    /**
     * 埋点
     * @param id    事件ID
     */
    maidian: function (id) {
      if(TDAPP != undefined){
        let kv = {"usercode":LocalDAO.getUserCode()};
        TDAPP.onEvent(id,"",kv);
        TDAPP.send();
      }
    },
  }

}
</script>


<style scoped>
  /*推荐比赛*/
  .game_main .game-suggest{
    position: relative;
    width: 100%;
  }

  .game_main .game-suggest-bg{
    width: 100%;
  }
  .game_main .game-suggest_name-and-index{
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    color: white;
    font-size: 2.2rem;
  }
  .game_main .game-suggest_detail{
    margin-left: 10px;
    color: #FFFFFF;
    font-size: 0.8rem;
    border: solid #a0daf5 1px;
    border-radius: 11px;
    height: 20px;
    padding: 2px 10px;
    vertical-align: middle;
    display: inline-block;
  }
  .game_main .game-parting-line{
    position: relative;
  }
  .game_main .game-parting-line_line{
    text-align: center;
    width: 100%;
    height: 3px;
    background: -webkit-linear-gradient(left, white, #648BE3 50%, white);
    background: linear-gradient(to right, white ,#648BE3 50%, white);
  }
  .game_main .game-parting-line_line i{
    width: 40px;
    height: 40px;
    padding: 5px;
    position: relative;
    display: inline-block;
    top: -15px;
    z-index: 1;
    color: #FFFFFF;
    background-color: #648BE3;
    border-radius: 20px;
    font-size: 25px;
    line-height: 30px;
    -webkit-transition: -webkit-transform 0.3s ease-out;
            transition: transform 0.3s ease-out;
  }

  .game_main .game-kind-tab-wrap{
    bottom: 20%;
    width: 100%;
    padding-top: 0.6rem;
  }
  .game_main .game-kinds{
    padding-bottom: 5px;
    position: relative;
    width: 100%;
    height: 13%;
    text-align: center;
    font-size: 0.8rem;
    background-image: url("../assets/images/game/kinds-bg.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
  }
  .game_main .game-kinds .k-line-new{
    position: absolute;
    top:11px;
    right:14%;
    width:30px;
  }
  .game_main .game-kind-tab{
    width: 24%;
    display: inline-block;
    color: #999999;
    margin: 5px auto;
  }
  .game_main .game-kind-tab i{
    font-size: 3rem;
    color: #51BEEF;
  }
  .game_main .game-kind-tab_title{
    font-size: 1.5rem;
  }
  .game_main .game-kind-tab_icon{
    padding:0px;
  }
  .game_main .game-kind-tab-select{
    color: #3FB9EE;
  }
  .game_main .game-kind-tab-select i{
    color: #FFFFFF;
    padding: 3px;
    border-radius: 50%;
    background-color: #3FB9EE;
  }
  .game_main .game-list{
    padding-bottom: 44px;
  }
  .game_main .loading{
    width: 100%;
    text-align: center;
    color: #999999;
    margin-top: 1rem;
    font-size: 1.5rem;
  }
  .game_main .no-games{
    width: 100%;
    text-align: center;
    color: #999999;
    margin-top: 1rem;
    font-size: 1.5rem;
    display: none;
  }
  /*Personal PK*/
  .game_main .sort-header-wrap{
    padding: 5px 25px;
    font-size: 1.3rem;
    color: #999999;
    background-color: #FFFFFF;
  }
  .game_main .sort-header-wrap div{
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
  }
  .game_main .sort-header-wrap i{
    font-size: 1rem;
  }
  .game_main .sort-header-wrap span{
    display: inline-block;
  }
  .game_main .sort-header-wrap .sort-header-wrap-up {
    color: #78D4FF;
  }
  .game_main .game-wrap .sort-header-wrap .clock{
    width: 100px;
    padding: 7px 0;
    text-align: center;
  }
  .game_main .game-wrap .sort-header-wrap .no_clock-wrap{
    left: 100px;
    padding: 7px 0;
    position: absolute;
    right: 0;
    text-align: center;
  }
  .game_main .game-wrap .sort-header-wrap .start-time{
    width: 32%;
    text-align: left;
  }
  .game_main .game-wrap .sort-header-wrap .award{
    width: 32%;
    text-align: center;
  }
  .game_main .game-wrap .sort-header-wrap .players{
    width: 32%;
    text-align: right;
  }

  .game_main .game-wrap .sort-header-wrap img{
    width: 6px;
  }
  .game_main .game-wrap .sort-header-wrap div{
    display: inline-block;
    padding: 2px auto 2px auto;
  }
  .game_main .game-wrap .game-next-page-wrap{
    width: 100%;
    text-align: center;
    display: none;
  }
  .game_main .game-wrap .game-next-page-wrap .game-next-page_icon{
    width: 30px;
    margin: 0 auto;
  }
  .game_main .game-wrap .game-init-loading-wrap{
    width: 100%;
  }
  .game_main .game-wrap .game-init-loading-wrap .game-init-loading_icon{
    width: 30px;
    margin: 0 auto;
  }

  /* 加载的动画 */
  .game-loading{
    -webkit-animation: gameLoading 1s linear 0s infinite ;
            animation: gameLoading 1s linear 0s infinite ;
    text-align: center;
  }
  @-webkit-keyframes gameLoading {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg);transform: rotate(360deg)}
  }
  @keyframes gameLoading {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg);transform: rotate(360deg)}
  }

  .game_main .footer{
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #FFFFFF;
    /* padding: 15px; */
    text-align: center;
    z-index: 2;
    border-top: 1px solid #E7E7E7;
    height: 44px;
    line-height: 44px;
  }
  .game_main .footer-game-all {
    width: 40%;
    height: 30px;
    color: #3FB9EE;
    line-height: 30px;
    display: inline-block;
    border: solid 1px #3FB9EE;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    margin: 7px auto;
  }
  .game_main .footer-game-self{
    width: 40%;
    height: 30px;
    color: #3FB9EE;
    line-height: 30px;
    border: solid 1px #3FB9EE;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    display: inline-block;
  }
  .game_main .footer-game-select{
    background-color: #3FB9EE;
    color: #FFFFFF;
  }
</style>
